<template>
  <div class="bid-add">
    <div class="page-title">
      <div>编辑{{ apgeTitle }}</div>
    </div>
    <div class="add-form">
      <!-- 编辑项目 -->
      <el-form :model="objectInfoForm" label-width="100px" v-if="userInfo === '1'">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="部门：">
              <el-select v-model="objectInfoForm.department" placeholder="请选择部门">
                <el-option
                  v-for="item in department"
                  :key="item.id"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人：">
              <el-input v-model.trim="objectInfoForm.principal" placeholder="请输入负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="助理：">
              <el-input v-model.trim="objectInfoForm.assistant" placeholder="请输入助理名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目编号：">
              <el-input v-model.trim="objectInfoForm.pid"  placeholder="请输入项目编号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目名称：">
              <el-input v-model.trim="objectInfoForm.pname"  placeholder="请输入项目名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备案号：">
              <el-input v-model.trim="objectInfoForm.recordid" placeholder="请输入备案号"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托单位：">
              <el-input v-model.trim="objectInfoForm.client"  placeholder="请输入委托单位" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="招标方式：">
              <el-select v-model="objectInfoForm.bidmethod" placeholder="请选择招标方式">
                <el-option
                  v-for="item in bidmethod"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="招标类别：">
              <el-select v-model="objectInfoForm.bidcategory" placeholder="请选择招标类别">
                <el-option
                  v-for="item in bidcategory"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工程类别：">
              <el-select v-model="objectInfoForm.enginer" placeholder="请选择工程类别">
                <el-option
                  v-for="item in enginer"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评标办法：">
              <el-select v-model="objectInfoForm.bidway" placeholder="请选择评标办法">
                <el-option
                  v-for="item in bidway"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公告时间：">
              <el-date-picker
                v-model="objectInfoForm.anntime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择公告时间"
                :size="size"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="开标时间：">
              <el-date-picker
                v-model="objectInfoForm.opentime"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="请选择开标时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开标地点：">
              <el-select v-model="objectInfoForm.parea" placeholder="请选择开标地点">
                <el-option
                  v-for="item in parea"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="估算价：">
              <el-input v-model.trim="objectInfoForm.planprice" placeholder="请输入估算价"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="控制价：">
              <el-input v-model.trim="objectInfoForm.controlprice" placeholder="请输入控制价" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="是否外委：">
              <el-select v-model="objectInfoForm.decide" placeholder="请选择是否外委">
                <el-option
                  v-for="item in isSure"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否依法：">
              <el-select v-model="objectInfoForm.law" placeholder="请选择是否依法">
                <el-option
                  v-for="item in isSure"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否电子标：">
              <el-select v-model="objectInfoForm.online" placeholder="请选择是否是电子标">
                <el-option
                  v-for="item in isSure"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 新增投标信息 -->
      <div class="bid-content" v-if="userInfo === '2'">
        <el-button type="primary" @click="addBidItem">加一行</el-button>
        <el-table :data="bidTableList" border style="width: 100%" max-height="618">
          <el-table-column v-for="(item, index) in tableHeaderList" :key="item.id" align="center" :prop="item.prop" :label="item.label" :width="item.width" :fixed="index === 0 ? true : false" >
            <template #default="scope" v-if="item.prop === 'state'">
              <el-select v-model="bidTableList[scope.$index][item.prop]" :placeholder="`请选择${item.label}`">
                <el-option
                  v-for="item in state"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </template>
            <template #default="scope" v-else-if="item.prop === 'rtime' || item.prop === 'invocetime'">
              <el-date-picker
                v-model="bidTableList[scope.$index][item.prop]"
                value-format="YYYY-MM-DD"
                type="date"
                :placeholder="`请选择${item.label}`"
              />
            </template>
            <template #default="scope" v-else-if="item.prop === 'operate'">
              <el-button type="danger" @click="deleteBidItem(scope.$index)">删除</el-button>
            </template>
            <template #default="scope" v-else>
              <el-input v-model="bidTableList[scope.$index][item.prop]" :placeholder="`请输入${item.label}`" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 结算信息 -->
      <!--  v-if="userInfo === '3'" -->
      <el-form :model="settlementForm" label-width="120px" v-if="userInfo === '3'">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目进度：">
              <el-select v-model="settlementForm.progress" placeholder="请选择项目进度">
                <el-option
                  v-for="item in progress"
                  :key="item.id"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="中标单位名称：">
              <el-input v-model.trim="settlementForm.wincompany" placeholder="请输入中标单位名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="中标价：">
              <el-input v-model.trim="settlementForm.winprice" placeholder="请输入中标价" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="中标单位项目经理：">
              <el-input v-model.trim="settlementForm.winmanager"  placeholder="请输入中标单位项目经理"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="中标单位法人：">
              <el-input v-model.trim="settlementForm.behalf"  placeholder="请输入中标单位法人"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="法人身份证号：">
              <el-input v-model.trim="settlementForm.behalfcard" placeholder="请输入法人身份证号"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="中标单位联系方式：">
              <el-input v-model.trim="settlementForm.winphone"  placeholder="请输入中标单位联系方式" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否内部中标：">
              <el-select v-model="settlementForm.inn" placeholder="请选择是否内部中标">
                <el-option
                  v-for="item in isSure"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="结算时间：">
              <el-date-picker
                v-model="settlementForm.stime"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="请选择结算时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="add-button">
      <el-button type="primary" @click="submit" >提交</el-button>
      <el-button type="primary" @click="goback" >返回</el-button>
    </div>
  </div>
</template>


<script setup>
import { ElMessage } from 'element-plus'
import { department, bidmethod, bidcategory, enginer, bidway, parea, isSure, state, progress } from '@/utils/dict.js'
import { userStore } from '@/store/user.js'
import pageApi from '@/api/page.js'

// 身份标识
const store = userStore()
const { userInfo } = storeToRefs(store)
const router = useRouter()
const route = useRoute()
let objectInfoForm = {};
const getObject = async () => {
  const params = route.query.id;
  const res = await pageApi.getObject({id: params})
  objectInfoForm = res.data;
}
// 页面标题
const apgeTitle = ref('项目')
// 新增项目表单
// 投标信息list
const bidTableList = ref([])
// 结算信息
const settlementForm = reactive({
  id: route.query.id,
  progress: '',
  wincompany: '',
  winprice: '',
  winmanager: '',
  behalf: '',
  behalfcard: '',
  winphone: '',
  inn: '',
  stime: ''
})
const tableHeaderList = ref([
  {
    id: 1,
    label: '投标单位名称',
    prop: 'tname',
    width: 200
  },
  {
    id: 2,
    label: '保证金金额',
    prop: 'cash',
    width: 200
  },
  {
    id: 3,
    label: '投标状态',
    prop: 'state',
    width: 200
  },
  {
    id: 4,
    label: '退款金额',
    prop: 'rcash',
    width: 200
  },
  {
    id: 5,
    label: '退款时间',
    prop: 'rtime',
    width: 200
  },
  {
    id: 6,
    label: '预中标价',
    prop: 'rprice',
    width: 200
  },
  {
    id: 7,
    label: '中标服务费',
    prop: 'serprice',
    width: 200
  },
  {
    id: 8,
    label: '开票时间',
    prop: 'invocetime',
    width: 200
  },
  {
    id: 9,
    label: '开票金额',
    prop: 'invoceprice',
    width: 200
  },
  {
    id: 10,
    label: '发票号',
    prop: 'invoceid',
    width: 200
  },
  {
    id: 11,
    label: '备注',
    prop: 'remark',
    width: 200
  },
  {
    id: 12,
    label: '操作',
    prop: 'operate',
    width: 150
  }
])

onMounted(() => {
  getObject();
  if (userInfo.value === '1') {
    apgeTitle.value = '项目'
  } else if (userInfo.value === '2') {
    apgeTitle.value = '投标信息'
  }
})

const addBidItem = () => {
  const obj = {
    tname: '',
    cash: '',
    state: '',
    rcash: '',
    rtime: '',
    rprice: '',
    serprice: '',
    invocetime: '',
    invoceprice: '',
    invoceid: '',
    remark: '',
    pid: '1'
  }
  bidTableList.value.push(obj)
}

const deleteBidItem = (index) => {
  bidTableList.value.splice(index, 1)
}
//添加返回
const goback = ()=>{
  router.push({
    path: '/data-center/bid/list'
  })
}
const submit = async () => {
  let url = ''
  let params = null
  if (userInfo.value === '1') {
    url = 'project/add',
    params = { ...objectInfoForm }
  } else if(userInfo.value === '2') {
    url = 'tender/add',
    params = [...bidTableList.value]
  } else if(userInfo.value === '3') {
    url = 'project/settle',
    params = {...settlementForm}
  }

  const res = await pageApi.submit(url, params)
  if (res.code == '0') {
    ElMessage({
      message: `${apgeTitle.value}提交成功`,
      type: 'success'
    })
    router.push({
      path: '/data-center/bid/list'
    })
  } else {
    ElMessage({
      message: res.message,
      type: 'error'
    })
  }
}
</script>


<style scoped lang="scss">
:deep(.el-form) {
  .el-form-item {
    margin-bottom: 0.3rem;
    .el-select, .el-date-editor {
      width: 100%;
    }
    .el-form-item__label {
      padding: 0;
      color: #333;
      font-size: 0.16rem;
    }
    .el-input__inner {
      color: #333333;
      height: 0.36rem;
      line-height: 0.36rem;
      font-size: 0.16rem;
    }
  }
}
:deep(.el-date-editor) {
  width: 100% !important;
}
.el-button {
  width: 1rem;
  height: 0.4rem;
  font-size: 0.16rem;
}
.el-button--danger {
  width: 0.6rem;
  height: 0.3rem;
}
:deep(.el-table) {
  margin-top: 0.16rem;
  .el-table__header {
    font-size: 0.16rem;
    thead {
      color: #333333;
    }
  }
  .el-table__cell {
    padding: 0.12rem 0;
  }
}
</style>